<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col
        :span="6"
        v-for="(item, currIndex) in amountList"
        :key="currIndex"
      >
        <vue-card title="商品总销量">
          <span>{{ item.subtitle }}：{{ item.number1 }}</span>
        </vue-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 10px">
      <el-col :span="7">
        <vue-card title="分类商品数量(饼图)">
          <pie-echart :pieData="categoryGoodsCount"></pie-echart>
        </vue-card>
      </el-col>
      <el-col :span="10">
        <vue-card title="不同城市商品销量">
          <map-echart :mapData="addressGoodsSale"></map-echart>
        </vue-card>
      </el-col>
      <el-col :span="7">
        <vue-card title="分类商品数量(玫瑰图)">
          <rose-echart :roseData="categoryGoodsCount"></rose-echart>
        </vue-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="row">
      <el-col :span="12">
        <vue-card title="分类商品的销量">
          <line-echart v-bind="categoryGoodsSale"></line-echart>
        </vue-card>
      </el-col>
      <el-col :span="12">
        <vue-card title="分类商品的收藏">
          <bar-echart v-bind="categoryGoodsFavor"></bar-echart>
        </vue-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import { useStore } from "@/store";
import baseEchart from "@/base-ui/echarts";
import vueCard from "@/base-ui/card";
import {
  pieEchart,
  roseEchart,
  lineEchart,
  barEchart,
  mapEchart,
} from "@/components/page-charts";

export default defineComponent({
  name: "dashboard",
  components: {
    vueCard,
    baseEchart,
    pieEchart,
    roseEchart,
    lineEchart,
    barEchart,
    mapEchart,
  },
  setup() {
    const store = useStore();
    store.dispatch("dashboardModule/categoryGoodsCountActions");

    // 销量统计
    const amountList = computed(() => {
      return store.state.dashboardModule.topPanelDatas.map((item) => {
        return item;
      });
    });

    // 分类商品数量 / 分类商品数量
    const categoryGoodsCount = computed(() => {
      return store.state.dashboardModule.categoryGoodsCount.map((item) => {
        return { value: item.goodsCount, name: item.name };
      });
    });

    // 分类商品的销量
    const categoryGoodsSale = computed(() => {
      const goodsSale = store.state.dashboardModule.categoryGoodsSale;
      const dataSeries: number[] = [];
      const xLabels: any[] = [];
      for (const item of goodsSale) {
        dataSeries.push(item.goodsCount);
        xLabels.push(item.name);
      }
      return {
        dataSeries,
        xLabels,
      };
    });

    // 分类商品的收藏
    const categoryGoodsFavor = computed(() => {
      const goodsFavor = store.state.dashboardModule.categoryGoodsFavor;
      const dataSeries: number[] = [];
      const xLabels: any[] = [];
      for (const item of goodsFavor) {
        dataSeries.push(item.goodsFavor);
        xLabels.push(item.name);
      }
      return {
        dataSeries,
        xLabels,
      };
    });

    // 不同城市商品销量
    const addressGoodsSale = computed(() => {
      return store.state.dashboardModule.goodsAddressSale.map((item) => {
        return { name: item.address, value: item.count };
      });
    });
    return {
      amountList,
      categoryGoodsCount,
      categoryGoodsSale,
      categoryGoodsFavor,
      addressGoodsSale,
    };
  },
});
</script>

<style scoped lang="less">
.dashboard {
  background-color: #f5f5f5;
  span {
    font-size: 20px;
    color: #000;
  }
  .row {
    margin-top: 15px;
  }
}
</style>
